<template>
    <div class="control-wrapper" @click="gotoControl">
        <div class="control-cover">
            <img :src="imgCover + '?imageView&thumbnail=120y120&quality=100&tostatic=0'" alt=" "/>
        </div>
        <div class="control-info">
            <div class="song-text">{{songName}}</div>
            <p class="author-text">{{singer}}</p>
        </div>
        <div class="play-box">
            <v-icon
                @click.stop="toggleShowList"
                class="box-left"
            >
                mdi-playlist-play
            </v-icon>
            <v-icon 
                @click.stop="togglePlayState"
                :disabled="(audio && audio.src && audio.src.length === 0)"
                class="box-right"
            >
                {{playState ? 'mdi-pause-circle-outline' : 'mdi-play-circle-outline'}}

            </v-icon>
            <v-progress-circular
                :rotate="360"
                :size="24"
                :width="2"
                :value="rate"
                color="teal"
                class="progress-circle-rate"
                v-show="rate != 0"
            >
            </v-progress-circular>
        </div>

        <v-bottom-sheet v-model="showList" >
            <v-app-bar height="32" >
                <div style="display: flex; justify-content: space-between; padding: 0 6px; width: 100%; box-sizing: border-box;">
                    <v-icon 
                        @click="playListByRepeat"
                    >
                        mdi-playlist-play
                    </v-icon>

                    <v-icon
                        @click="clearList"
                    >
                        mdi-delete
                    </v-icon>
                </div>
                
            </v-app-bar>
            <v-sheet class="text-center overflow-y-auto" height="300px" style="padding-top: 10px;">
                <!-- <v-btn
                class="mt-6 absolute"
                text
                color="red"
                @click="showList = !showList"
                >close</v-btn> -->
                <song-cell :data="cacheList" detail ></song-cell>
                
            </v-sheet>
        </v-bottom-sheet>
    </div>
</template>
<script>
import {musicMixin} from '@/utils/mixin'
import songCell from '../songCell/songCell'
import songCellItem from '../songCell/songCellItem.vue'
export default {
  components: { songCellItem,songCell },
    name: 'Control',
    mixins: [musicMixin],
    data(){
        return {
            showList: false,
            rate: 0
        }
    },
    computed: {

    },
    methods: {
      nextMusic1(){

      },

      toggleShowList(){
          this.showList = !this.showList
      },

      playListByRepeat(){
         
        //  this.setPlayMode = 'repeat';
         this.setPlayList(this.cacheList);
         this.setPlayInfo(this.cacheList[0].id).then(res=>{
             this.playMusic();
         });
      },

      clearList(){

      }
    },
    mounted(){
        if(this.cacheList.length == 0){
            let caches = localStorage.getItem('cacheList');
            if(caches){
                caches = JSON.parse(caches);
                this.setCacheList(caches);
            }

        }
    }
}
</script>
<style lang="scss" scoped>
    @import '@/assets/styles/global';
    .control-wrapper {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 0 0 px2rem(6) #ccc;
        background: #fff;
        height: px2rem(52);
        display: flex;
        z-index: 999;
        .control-cover {
            flex-shrink: 0;
            width: px2rem(56);
            display: flex;
            justify-content: center;
            align-items: center;
            img {
                width: 90%;
                height: 90%;
                border-radius: px2rem(10);
                background-color: #fff1f1;
            }
        }

        .control-info {
            width: 0;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: px2rem(16);
            padding-left: px2rem(12);
            text-align: left;
            box-sizing: border-box;
            .author-text {
                color: #444;
                font-size: px2rem(14);
                margin-top: px2rem(6);
            }
        }

        .play-box {
            width: px2rem(80);
            border-right: px2rem(1) solid #ccc;
            font-size: px2rem(16);
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: relative;
            .box-left {
                position: absolute;
                left: 0;
            }

            .box-right {
                position: absolute;
                right: px2rem(4);
                z-index: 2;
            }
            .progress-circle-rate {
                position: absolute;
                right: px2rem(4);
            }
        }


        .v-bottom-sheet {
            &.v-dialog {
                position: relative;
            }
        }
    }

    

    

    

    
</style>